import 'dart:math';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xmshop/app/services/httpsClient.dart';
import '../controllers/home_controller.dart';
import '../../../services/keepAliveWrapper.dart';
import '../../../services/screebAdapter.dart';
import '../../../services/ityingFonts.dart';
import 'package:card_swiper/card_swiper.dart';
// 瀑布流插件
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);
  // 获取设置appBar
  Widget _getAppBar() {
    return Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: Obx(() => AppBar(
              actions: [
                IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.qr_code,
                    color:
                        controller.flag.value ? Colors.black87 : Colors.white,
                  ),
                ),
                IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.message,
                      color:
                          controller.flag.value ? Colors.black87 : Colors.white,
                    )),
              ],
              leading: controller.flag.value
                  ? const Text('')
                  : const Icon(
                      ItyingFonts.xiaomi,
                      color: Colors.white,
                    ),
              leadingWidth:
                  controller.flag.value ? 20 : ScreenAdapter.width(140),
              // 搜索框按钮
              title: InkWell(
                onTap: () => Get.toNamed('/search'),
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  width: controller.flag.value
                      ? ScreenAdapter.width(800)
                      : ScreenAdapter.width(620),
                  height: ScreenAdapter.height(100),
                  decoration: BoxDecoration(
                      color: const Color.fromARGB(230, 252, 243, 236),
                      borderRadius: BorderRadiusDirectional.circular(50)),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(
                            left: ScreenAdapter.width(34),
                            right: ScreenAdapter.width(10)),
                        child: const Icon(Icons.search),
                      ),
                      Text(
                        '手机',
                        style: TextStyle(
                            fontSize: ScreenAdapter.fontSize(32),
                            color: Colors.black54),
                      )
                    ],
                  ),
                ),
              ),
              centerTitle: true,
              // 投影北京
              backgroundColor:
                  controller.flag.value ? Colors.white : Colors.transparent,
              // 取消阴影
              elevation: 0,
            )));
  }

  // 轮播图
  Widget _focusWidget() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(682),
      child: Obx(() => Swiper(
            autoplay: true,
            loop: true,
            pagination: const SwiperPagination(),
            itemCount: controller.swiperList.length,
            itemBuilder: (context, index) {
              return Image.network(
                HttpsClient.replaeUrl(controller.swiperList[index].pic),
                fit: BoxFit.cover,
              );
            },
          )),
    );
  }

  // banner
  Widget _bannerWidget() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(92),
      child: Image.asset(
        'assets/images/xiaomiBanner.png',
        fit: BoxFit.cover,
      ),
    );
  }

  Widget _banner2Widget() {
    return Padding(
      padding: EdgeInsets.only(
          left: ScreenAdapter.width(20),
          right: ScreenAdapter.width(20),
          top: ScreenAdapter.height(20)),
      child: Container(
        width: double.infinity,
        height: ScreenAdapter.height(420),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            image: const DecorationImage(
                image: AssetImage(
                  'assets/images/xiaomiBanner2.png',
                ),
                fit: BoxFit.cover)),
      ),
    );
  }

// 顶部分类
  Widget _category() {
    return SizedBox(
      width: ScreenAdapter.width(1080),
      height: ScreenAdapter.height(470),
      child: Obx(() => Swiper(
            loop: false,
            pagination: const SwiperPagination(),
            itemCount: (controller.categroyList.length ~/ 10).toInt(),
            itemBuilder: (context, index) {
              return GridView.builder(
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 5,
                    crossAxisSpacing: ScreenAdapter.width(20),
                    mainAxisSpacing: ScreenAdapter.height(20)),
                itemCount: 10,
                itemBuilder: (BuildContext context, int i) {
                  return Column(
                    children: [
                      Container(
                        alignment: Alignment.center,
                        height: ScreenAdapter.height(140),
                        width: ScreenAdapter.height(140),
                        child: Image.network(
                          HttpsClient.replaeUrl(
                              controller.categroyList[i + 10 * index].pic),
                          fit: BoxFit.fitHeight,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                            left: 0, right: 0, top: ScreenAdapter.height(4)),
                        child: Text(
                          controller.categroyList[i + 10 * index].title,
                          style:
                              TextStyle(fontSize: ScreenAdapter.fontSize(34)),
                        ),
                      )
                    ],
                  );
                },
              );
            },
          )),
    );
  }

// 热销臻品
  Widget _bestSelling() {
    return Column(
      children: [
        // 标题
        Padding(
          padding: EdgeInsets.only(
              left: ScreenAdapter.width(30),
              right: ScreenAdapter.width(30),
              top: ScreenAdapter.width(20),
              bottom: ScreenAdapter.width(20)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                '热销甄选',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: ScreenAdapter.fontSize(46)),
              ),
              Text(
                '更多手机 >',
                style: TextStyle(
                    // fontWeight: FontWeight.bold,
                    fontSize: ScreenAdapter.fontSize(36)),
              )
            ],
          ),
        ),
        // 内容
        Padding(
          padding: EdgeInsets.only(
              left: ScreenAdapter.width(30),
              right: ScreenAdapter.width(30),
              top: ScreenAdapter.width(20),
              bottom: ScreenAdapter.width(20)),
          child: Row(
            children: [
              // 左侧轮播图
              Expanded(
                  flex: 1,
                  child: SizedBox(
                    height: ScreenAdapter.height(738),
                    child: Obx(() => Swiper(
                          autoplay: true,
                          loop: true,
                          pagination: const SwiperPagination(),
                          itemCount: controller.bestSellingSwiperList.length,
                          itemBuilder: (context, index) {
                            return Image.network(
                              HttpsClient.replaeUrl(
                                  controller.bestSellingSwiperList[index].pic),
                              fit: BoxFit.cover,
                            );
                          },
                        )),
                  )),
              SizedBox(
                width: ScreenAdapter.width(20),
              ),
              // 右侧列表
              Expanded(
                  flex: 1,
                  child: SizedBox(
                    height: ScreenAdapter.height(738),
                    child: Obx(() => Column(
                          children: controller.bestSellingList
                              .asMap()
                              .entries
                              .map((entrie) {
                            var item = entrie.value;
                            return Expanded(
                                flex: 1,
                                child: Container(
                                  margin: EdgeInsets.only(
                                      bottom: entrie.key == 2
                                          ? 0
                                          : ScreenAdapter.height(20)),
                                  color: const Color.fromRGBO(246, 246, 246, 1),
                                  child: Row(
                                    children: [
                                      Expanded(
                                          flex: 3,
                                          child: Column(
                                            children: [
                                              SizedBox(
                                                  height:
                                                      ScreenAdapter.height(20)),
                                              Text(item.title,
                                                  style: TextStyle(
                                                      fontSize: ScreenAdapter
                                                          .fontSize(38),
                                                      fontWeight:
                                                          FontWeight.bold)),
                                              SizedBox(
                                                  height:
                                                      ScreenAdapter.height(20)),
                                              Text(item.subTitle,
                                                  style: TextStyle(
                                                      fontSize: ScreenAdapter
                                                          .fontSize(28))),
                                              SizedBox(
                                                  height:
                                                      ScreenAdapter.height(20)),
                                              Text("￥${item.price}元",
                                                  style: TextStyle(
                                                      fontSize: ScreenAdapter
                                                          .fontSize(34)))
                                            ],
                                          )),
                                      Expanded(
                                          flex: 2,
                                          child: Padding(
                                            padding: EdgeInsets.all(
                                                ScreenAdapter.height(8)),
                                            child: Image.network(
                                                HttpsClient.replaeUrl(item.pic),
                                                fit: BoxFit.cover),
                                          )),
                                    ],
                                  ),
                                ));
                          }).toList(),
                        )),
                  )),
            ],
          ),
        )
      ],
    );
  }

// 热门商品
  Widget _bestGoods() {
    return Column(
      children: [
        // 标题
        Padding(
          padding: EdgeInsets.only(
              left: ScreenAdapter.width(30),
              right: ScreenAdapter.width(30),
              top: ScreenAdapter.width(40),
              bottom: ScreenAdapter.width(20)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '省心优惠',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: ScreenAdapter.fontSize(46)),
              ),
              Text(
                '全部优惠 >',
                style: TextStyle(fontSize: ScreenAdapter.fontSize(36)),
              ),
            ],
          ),
        ),
        // 瀑布流
        Obx(() => Container(
              padding: EdgeInsets.all(ScreenAdapter.width(30)),
              child: MasonryGridView.count(
                // 每列数
                crossAxisCount: 2,
                // 主轴方向间距
                mainAxisSpacing: ScreenAdapter.width(20),
                // 副轴方向间距
                crossAxisSpacing: ScreenAdapter.width(20),
                // 子元素的数量
                itemCount: controller.hotSellinglist.length,
                // 子元素宽度自适应
                shrinkWrap: true,
                // 禁止滑动
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  var picUrl =
                      "https://xiaomi.itying.com/${controller.hotSellinglist[index].sPic}";
                  return InkWell(
                    onTap: () {
                      Get.toNamed('/product-content', arguments: {
                        "id": controller.hotSellinglist[index].id
                      });
                    },
                    child: Container(
                      padding: EdgeInsets.all(ScreenAdapter.width(20)),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.black12, width: 1),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      width: double.infinity,
                      height: ScreenAdapter.height(750),
                      child: Column(
                        children: [
                          Container(
                            height: ScreenAdapter.height(490),
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            child: Image.network(
                              picUrl.replaceAll('\\', '/'),
                              fit: BoxFit.fitHeight,
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            width: double.infinity,
                            child: Text(
                              controller.hotSellinglist[index].title,
                              textAlign: TextAlign.start,
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(42)),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            width: double.infinity,
                            child: Text(
                              controller.hotSellinglist[index].subTitle,
                              textAlign: TextAlign.start,
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(32)),
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            width: double.infinity,
                            child: Text(
                              '￥ ${controller.hotSellinglist[index].price}',
                              textAlign: TextAlign.start,
                              style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(32)),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ))
      ],
    );
  }

  // 获取home内容区域
  Widget _getHomePage() {
    return Positioned(
      top: -ScreenAdapter.height(80),
      right: 0,
      left: 0,
      bottom: 0,
      // https://www.itying.com/images/focus/focus02.png
      child: ListView(
        controller: controller.scrollController,
        children: [
          // 轮播图
          _focusWidget(),
          _bannerWidget(), // banner
          _category(), // 分类
          _banner2Widget(),
          _bestSelling(), // 热销臻品
          _bestGoods(), // 热门商品
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return KeepAliveWrapper(
        child: Scaffold(
      body: Stack(
        children: [
          _getHomePage(),
          _getAppBar(),
        ],
      ),
    ));
  }
}
